<!doctype html>
<html>
    <meta charset="utf-8">
        <title>Deposits and Withdrawals</title>
        <script type="text/javascript" src='http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js'></script>
        <script src="http://cdn.bootcss.com/vue/1.0.24/vue.js"></script>
		<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
		<script src="http://cdn.bootcss.com/webuploader/0.1.1/webuploader.js"></script>
	
        <script type="text/javascript">
		//	Vue.config.devtools = true
		//$(function () {

		//	new Vue({
	 //       	el:'#there',
	 //       	data:{
		//        	file_name:'',
	 //       	},
		//		methods:{
		//			show_upload:function(){
						
		//			},
		//			pre_view:function () {
		//				this.$refs.f1.read(function (data) {
		//					$('#haha')[0].src = data
		//				})
		//			},
		//			fack_click:function () {
		//				$('#jjyy').click()
		//			},
		//			upload:function () {
		//				this.$refs.f1.upload('http://localhost:8000/upload_image_demo/')
						
		//			}
		//		}
  //      	})

		//})

$(function () {
	

		var uploader = WebUploader.create({

		    // swf文件路径
		    swf: 'http://cdn.bootcss.com/webuploader/0.1.1/Uploader.swf',

		    // 文件接收服务端。
		    server: 'http://localhost:8000/upload_image_demo/',
		    auto: true,

		    // 选择文件的按钮。可选。
		    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
		    pick: '#picker',

		    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
		    resize: false
		});
		// 当有文件被添加进队列的时候
		uploader.on( 'fileQueued', function( file ) {
			$list=$('#thelist')
		    $list.append( '<div id="' + file.id + '" class="item">' +
		        '<h4 class="info">' + file.name + '</h4>' +
		        '<p class="state">等待上传...</p>' +
		    '</div>' );
		});

		// 文件上传过程中创建进度条实时显示。
		uploader.on( 'uploadProgress', function( file, percentage ) {
		    var $li = $( '#'+file.id ),
		        $percent = $li.find('.progress .progress-bar');

		    // 避免重复创建
		    if ( !$percent.length ) {
		        $percent = $('<div class="progress progress-striped active">' +
		          '<div class="progress-bar" role="progressbar" style="width: 0%">' +
		          '</div>' +
		        '</div>').appendTo( $li ).find('.progress-bar');
		    }

		    $li.find('p.state').text('上传中');

		    $percent.css( 'width', percentage * 100 + '%' );
		});
})
        </script>
    </head>
    <body>

		<div id="uploader" class="wu-example">
	    <!--用来存放文件信息-->
	    <div id="thelist" class="uploader-list"></div>
	    <div class="btns">
	        <div id="picker">选择文件</div>
	        <button id="ctlBtn" class="btn btn-default">开始上传</button>
	    </div>
	</div>
	    
        <!--<h1 id='tt'>Top 3 Transactions</h1>
		<div id='there'>
			<file-input v-ref:f1 id='jjyy' v-model='file_name'></file-input>
			<div><img src="" alt="" id='haha'></div>
			<button name="test" type="button" value="val" @click='pre_view()'>Button Text</button>
			<button name="test" type="button" value="val" @click='fack_click()'>dji</button>
			<button name="test" type="button" value="val" @click='upload()' :disabled='file_name?false:true'>upload</button>
		</div>-->
		
    </body>
</html>